<template>
  <div class="personInfo_box">
    <div class="breadcrumb" v-show="false">
      <router-link :to="{name: 'memberCenter'}" class="bread_a">个人中心</router-link> <i class="el-icon-arrow-right"></i>
      个人资料
    </div>
    <ul>
      <li class="person_head">
        <el-upload class="avatar-uploader" :action="baseUrl + '/resource/image'" :before-upload="beforeUpload" accept="image/*"
        :http-request="handleHttp" :on-success="handleSuccess" list-type="picture" :show-file-list="false">
          <img @mouseenter="maskhidden = false" class="head-img" :src="headImg" />
          <div class="avatar-mask" :class="{'mask-hidden': maskhidden}" v-if="headImg" @mouseleave="maskhidden = true">
            <div class="mask-inner"></div>
            <div class="mask-content">
              <!-- <i class="iconfont el-icon-knife-shouji mask-inner-icon"></i> -->
              <img class="mask-img" src="../../../images/camera.png" alt=""/>
              <p class="mask-inner-text">更换头像</p>
            </div>
          </div>
        </el-upload>
        <div class="person_info">
          <span class="name">{{username}}</span>
          <span class="examine-result" v-show="!showUpload">{{examTypes[personInfo.status]}}</span>
        </div>
        <!-- <div class="person_des">
          <p>公司名称 : {{personInfo.companyName}}</p>
        </div> -->
        <!-- <button @click="uploadLicense">上传营业执照</button> -->
        <div class="license" v-if="showUpload">
          <span class="license-child" @click="uploadLicense">上传企业信息</span>
        </div>
      </li>
      <li class="user_infos">
        <span class="title">注册手机号</span>
        <span class="value">{{mobile | phoneReplace}}</span>
      </li>
      <li class="user_infos">
        <span class="title">公司名称</span>
        <span class="value" :class="{'no_data': personInfo.companyName === null}">{{personInfo.companyName ? personInfo.companyName : '暂无填写'}}</span>
      </li>
      <li class="user_infos">
        <span class="title">公司地址</span>
        <span class="value">{{personInfo.province}}{{personInfo.city}}{{personInfo.area}}{{personInfo.address}}</span>
      </li>
      <li class="user_infos">
        <span class="title">营业执照</span>
        <span class="value">
          <img class="license_img" :src="licenseImg" />
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  import {uploadImg, setHeadImg} from '@/service/get-data'
  import {phoneReplace} from '@/tool/tool'
  import {imgUpload} from '@/components/index'
  import {Upload, Input} from 'element-ui'
  import {mapState} from 'vuex'
  import {prefixImg, examTypes} from '@/tool/index'
  import {baseUrl} from '@/config/baseUrl'
  import {setCookie} from '@/config/mUntils'
  export default{
    components: {
      imgUpload,
      elUpload: Upload,
      elInput: Input
    },
    data () {
      return {
        maskhidden: true,
        focusStatus: true,
        personInfo: {}, // 个人信息
        userForm: {
          qq: '',
          email: ''
        },
        userShow: {
          qq: true,
          email: true
        },
        headImg: '', // 显示头像图片
        imgPath: '', // 图片
        defaultUrl: require('../../../images/person_logo.png'),
        imageUrl: require('../../../images/person_logo.png')
      }
    },
    methods: {
      // 上传企业信息
      uploadLicense () {
        this.$router.push({name: 'CompanyCert'})
      },
      getPersonInfo () {
        this.$store.dispatch('getUserData').then(res => {
          res = res.data
          if (res.resultCode && res.resultCode === 2000) {
            // console.log('用户信息在一次记')
            setCookie('Exam', res.data.status)
            this.personInfo = res.data
            this.headImg = this.personInfo.headImg !== null ? prefixImg + this.personInfo.headImg : this.imageUrl
          } else {
            this.$message({
              message: res.resultMsg
            })
          }
        })
      },
      toggleInput (name) {
        let inputname = name
        this.userShow[inputname] = !this.userShow[inputname]
      },
      // 头像上传成功
      handleSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeUpload (file) {
        const reg = /^image\/+(JPEG|jpeg|JPG|jpg|png|PNG|gif)$/
        const isImg = reg.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isImg) {
          this.$message.error('上传图片只能是图片格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isImg && isLt2M
      },
      // 上传图片
      async handleHttp (file) {
        let param = new FormData()  // 创建form对象
        param.append('files', file.file, file.name)  // 通过append向form对象添加数据
        let res = await uploadImg(param)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          res.data.map((item, index) => {
            if (index === 0) {
              this.imgPath = item.filePath
              this.headImg = item.fileUri
              // this.imageUrl = item.fileUri
              this.setHeadImgFun()
              this.$store.dispatch('getUserData')
            }
          })
        }
      },
      // 更改头像
      async setHeadImgFun () {
        let res = await setHeadImg(this.imgPath)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.$message({
            message: '头像更改成功'
          })
        }
      }
    },
    computed: {
      ...mapState({
        mobile: state => state.user.mobile,
        username: state => state.user.username
      }),
      baseUrl () {
        return baseUrl
      },
      examTypes () {
        return examTypes
      },
      licenseImg () {
        return this.personInfo.businessLicense !== null ? prefixImg + this.personInfo.businessLicense : this.defaultUrl
      },
      showUpload () {
        return this.personInfo.infoNeedUpdateStatus || this.personInfo.status === 3
      }
    },
    mounted () {
      this.getPersonInfo()
    },
    filters: {
      phoneReplace
    }
  }
</script>
<style lang="scss" scoped>
  .person_head{
    display: table;
    width: 100%;
    padding-bottom: 36px;
    padding-top: 18px;
    @include border_bt(#ececec);
    &>div{
      display: table-cell;
      vertical-align: middle;
      font-size: 14px;
      color: #999999;
    }
    .avatar-uploader {
      position: relative;
      width: 115px;
      height: 115px;
      // border: 1px solid #dcdcdc;
      overflow: hidden;
      .head-img {
        border: 1px solid #ececec;
        border-radius: 50%;
        padding: 3px;
        width: 109px;
        height: 109px;
      }
      .mask-img{
        width: 32px;
        height: auto;
        margin-bottom: 8px;
      }
      .avatar-mask{
        position: absolute;
        width: 109px;
        height: 109px;
        top: 4px;
        left: 4px;
        z-index: 1;
        transition: opacity .2s ease-in;
      }
      .mask-inner{
        z-index: 4;
        // border: 4px solid #fff;
        border-radius: 50%;
        position: absolute;
        background: #1a1a1a;
        width: 100%;
        height: 100%;
        opacity: .6;
        box-sizing: border-box;
      }
      .mask-hidden {
        pointer-events: none;
        opacity: 0;
      }
      .mask-content{
        position: absolute;
        width: 80%;
        top: 50%;
        left: 50%;
        z-index: 5;
        color: #fff;
        text-align: center;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
      }
      .mask-inner-icon{
        font-size: 30px;
        /* line-height: 46px; */
        margin-bottom: 14px;
      }
      .mask-inner-text{
        font-size: 12px;
      }
    }
    .person_info{
      line-height: 30px;
      padding-left: 50px;
      .name{
        font-size: 16px;
        color: #333333;
      }
      .examine-result{
        border: 1px solid #FFCC00;
        border-radius: 4px;
        font-size: 14px;
        color: #FFCC00;
        margin-left: 15px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        width: 88px;
        display: inline-block;
      }
    }
    .person_des{
      line-height: 30px;

    }
    .license{
      vertical-align: middle;
      display: table-cell;
      text-align: right;
    }
    .license-child{
      background: #FFCC00;
      border-radius: 4px;
      font-size: 14px;
      color: #303030;
      padding:8px 18px;
      cursor: pointer;
    }
    .member{
      float: right;
      background: #FFCC00;
      border-radius: 4px;
      font-size: 14px;
      color: #444444;
      padding:8px 10px;
      
    }
  }
  .user_infos{
    display: table;
    height:40px;
    width: 100%;
    @include border_bt(#ececec);
    font-size: 16px;
    padding:10px 0;
    .title{
      display: table-cell;
      width:20%;
      color: #999999;
      padding-left: 50px;
      vertical-align: middle;
    }
    .value{
      display: table-cell;
      color: #666666;
      vertical-align: middle;
      // width: 26%;
    }
    .license_img{
      width: 160px;
      height: 160px;
    }
    .no_data{
      color: #bcbcbc;
    }
    .edit{
      display: table-cell;
      float: right;
      font-size: 14px;
      color: #2A91D2;
      padding-right: 30px;
      cursor: pointer;
    }
    .license-img{
      @include border(#ececec);
      width: 140px;
      height: 140px;
    }
  }
  .value_input{
    width: 245px;
  }
  
</style>

